<!-- 账单页面 -->
<template>
  <div class="billInfo">
    <div class="standardParkBox">
      <div class="title">{{ billTitle }}</div>
      <div class="standardParkMain">
        <img
          class="standardParkLeft"
          src="https://imgs.xlgxapp.com/app_imgs/standardPark.png"
        />
        <div class="standardParkRight">
          <div>
            <div class="circle"></div>
            请将车辆停放至白线内
          </div>
          <div>
            <div class="circle"></div>
            车头朝向马路
          </div>
          <div>
            <div class="circle"></div>
            与马路边缘呈90°
          </div>
          <div class="rule" @click="goRule" v-if="!needParkingImgReport">
            规则说明>
          </div>
          <div class="rule" @click="openModal" v-if="needParkingImgReport">
            规范停车照片示例>
          </div>
        </div>
      </div>
      <div class="needImg" v-if="needParkingImgReport">
        <div class="reportButton" bindtap="upload" v-if="!uploadStatus">
          上传规范停车照片
        </div>
        <div class="reportButton" style="opacity: 0.3" v-else>
          上传规范停车照片
        </div>
        <div class="findCancel">发现作弊将取消奖励资格</div>
      </div>
    </div>

    <div class="bill">
      <div class="paySuccessContent">
        <div class="customNo">车牌：{{ customNo }}</div>
        <div class="paySuccessTitle">
          <div class="tip1" v-if="status == 3">待支付</div>
          <div class="tip1" v-else>本次骑行费用</div>
          <div class="successMoney">
            <span style="font-size: 0.64rem">¥</span>{{ successPayment }}
          </div>
          <div class="tip2" v-if="billInfo">{{ billInfo }}</div>
        </div>
        <div class="drivingItemV2">
          <div>实际扣费</div>
          <div style="color: #ff6e2a">{{ successPayment }}元</div>
        </div>
        <div class="drivingItemV2" v-if="settlementTypeText">
          <div>支付渠道</div>
          <div>{{ settlementTypeText }}</div>
        </div>
        <div class="drivingItemV2" v-if="outFenceMoney">
          <div>违停费</div>
          <div>{{ outFenceMoney }}元</div>
        </div>
        <div class="drivingItemV2" v-if="helmetMoney">
          <div>头盔费用</div>
          <div>{{ helmetMoney }}元</div>
        </div>
        <div class="drivingItemV2">
          <div>用车费用</div>
          <div>{{ paymentFee }}元</div>
        </div>
        <div class="drivingItemV2" v-if="cashReward">
          <div>奖励现金</div>
          <div>{{ cashReward }}元</div>
        </div>
        <div class="drivingItemV2" v-if="giveMoneyReward">
          <div>奖励骑行费用</div>
          <div>{{ giveMoneyReward }}元</div>
        </div>
        <div class="drivingItemV2" v-if="drivingTime">
          <div>骑行时间</div>
          <div>
            <template v-if="drivingTime.days > 0">
              <span>{{ drivingTime.days }}</span
              >天
            </template>
            <template v-if="drivingTime.hours > 0 || drivingTime.days > 0">
              <span>{{ drivingTime.hours }}</span
              >时
            </template>
            <span>{{ drivingTime.min }}</span
            >分 <span>{{ drivingTime.sec }}</span
            >秒
          </div>
        </div>
        <div class="drivingItemV2">
          <div>计费时间</div>
          <div>
            <template v-if="ridingSecond.days > 0"
              ><span>{{ ridingSecond.days }}</span
              >天</template
            >
            <template v-if="ridingSecond.hours > 0 || ridingSecond.days > 0"
              ><span>{{ ridingSecond.hours }}</span
              >时</template
            >
            <span>{{ ridingSecond.min }}</span
            >分<span>{{ ridingSecond.sec }}</span
            >秒
          </div>
        </div>
        <div class="drivingItemV2">
          <div>骑行距离</div>
          <div>{{ distance }}km</div>
        </div>
        <div class="drivingItemV2" v-if="activitymoney">
          <div>活动优惠</div>
          <div style="color: #ff6e2a">-{{ activitymoney }}元</div>
        </div>
        <div class="drivingItemV2">
          <div>优惠券抵扣</div>
          <div v-if="couponMoney" style="color: #ff6e2a">
            -{{ couponMoney }}元
          </div>
          <div v-else style="color: #ff6e2a">0元</div>
        </div>
      </div>
    </div>
    <div class="bottomArea">
      <div class="button" @click="goRecharge">我要充值</div>
      <div class="button" @click="returnIndex">返回首页</div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import bill from "./bill.js";

export default {
  mixins: [bill],
};
</script>

<style scoped lang="stylus">
@import './bill.styl';
</style>
